<template>
	<view class="container">
		<view style="display: flex;align-items: center;justify-content: space-between;">
			<u-tabs :list="tabList" @click="hanelClick"></u-tabs>
			<view @click="() => show = true" style="text-align: center; color: blue;">{{activeColumns}} 期考核</view>
		</view>
		<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="cancel"></u-picker>
		<br />
		<view v-if="activeIndex == 0">
			<view style="text-align: center;">本期优秀人员名单</view>
			<br />
			<u-empty mode="data"  icon="../../static/images/not-data.png" text="暂无数据" v-if="exemplaryStaffList.length==0"/>
			<table class="custom-table" v-else>
				<tr>
					<th>部门</th>
					<th>姓名</th>
					<th>分数</th>
				</tr>
				
				<tr v-for="(item, index) in exemplaryStaffList" :key="index">
					<td>{{item.dept}}</td>
					<td>{{item.empName}}</td>
					<td>{{item.divide}}</td>
				</tr>

			</table>
			<br />
			<view class="charts-box" v-for="(item, index) in chartDataList" :key="index" style="margin-bottom: 30rpx;">
				<div style="padding: 30rpx;display: flex;align-items: center;justify-content: space-between;">
					<view>{{item.empNane}}</view>
					<view style="color: #999;">优秀次数：{{item.accumulatedNumber}}</view>
				</div>
				<qiun-data-charts :ontouch="true" type="line" :opts="opts" :chartData="item" />
			</view>
		</view>
		<view v-if="activeIndex == 1">
			<qiun-data-charts type="column" :opts="opts1" :chartData="chartData" />
			<br />
			<view class="card" v-for="(item,index) in deptData" :key="index">
				<view class="title">
					<view>{{item.dept}}</view>
					<u-icon name="arrow-right" color="#999" size="16" @click="handleDeptClick(item)"></u-icon>
				</view>
				<view class="card-content">
					<qiun-data-charts type="pie" :opts="opts2" :chartData="item.series" />
					<view style="display: flex;align-items: center;justify-content: space-between;margin-top: 30rpx;">
						<view>本期优秀人数 {{item.oiCount}}</view>
						<view>本年优秀人数 {{item.qtyCount}}</view>
					</view>
				</view>
			</view>
		</view>
		<image src="../../static/images/back-top.png" mode="" class="back-top" @click="backToTop"></image>
	</view>


	</view>
</template>

<script>
	import {
		QueryAllPersonnelScoreApi,
		QueryExemplaryStaffListApi,
		QueryNumberOfPeriodsApi,
		DepartmentStatisticsApi,
		AssessmentStatisticsApi
	} from '@/api/main.js'
	export default {
		data() {
			return {
				tabList: [{
					name: '汇总统计',
				}, {
					name: '按部门查看',
				}],
				activeIndex: 0,
				chartDataList: [], //所有人员分数
				exemplaryStaffList: [], //优秀人员名单
				show: false,
				columns: [],
				activeColumns: "",
				opts: { //所有人员分数charts 配置
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					enableScroll: true, //开启图表拖拽功能
					scrollAlign: 'left', //图表滚动条起始位置
					legend: {
						show: false,
					},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 4,
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						data: [{
							min: 0,
							max: 100
						}]
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						}
					}
				},
				opts1: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					title: {
						name: "11111",
						fontSize: 28,
					},
					padding: [15, 15, 0, 5],
					touchMoveLimit: 24,
					enableScroll: false,
					legend: {
						show: false,
					},
					xAxis: {
						disableGrid: true,
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				},
				opts2: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [5, 5, 5, 5],
					enableScroll: false,
					legend: {
						show: false,
					},
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				},
				chartData: {
					categories: [],
					series: [{
						name: "人数",
						data: []
					}, ]
				},
				deptData: {
					series: []
				}
			};
		},
		onReady() {

		},
		async onShow() {
			this.columns = []
			await this.getNumbeOfPeriods();
			await this.getServerData();
			await this.getDept()
		},
		methods: {
			backToTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			confirm(event) {
				console.log(event)
				this.activeColumns = event.value[0]
				this.show = false
				this.getServerData()
				this.getDept()
			},
			cancel() {
				this.show = false
			},
			async getNumbeOfPeriods() {
				const response = await QueryNumberOfPeriodsApi({
					'empId': uni.getStorageSync('empid')
				});
				this.columns.push(response.data);
				this.activeColumns = response.data[0];
				console.log(this.columns);
			},
			hanelClick(item) {
				this.activeIndex = item.index
				if (item.index == 0) {
					this.getServerData()
				} else {
					this.getDept()
				}
			},
			async getServerData() {
				//获取所有人员分数API
				const response = await QueryAllPersonnelScoreApi({
					date: this.activeColumns,
					dept: "",
					'empId': uni.getStorageSync('empid')
				});

				response.data.forEach(item => {
					item.series = [{
						name: "",
						lineType: "dash",
						data: [],
					}]
					item.categories = item.numberOfPeriodList
					item.series[0].name = item.empNane
					item.series[0].data = item.divideList
				});
				this.chartDataList = response.data;

				// 优秀人员名单API
				const exemplaryResponse = await QueryExemplaryStaffListApi({
					date: this.activeColumns,
					'empId': uni.getStorageSync('empid')
				});
				this.exemplaryStaffList = exemplaryResponse.data;
			},

			async getDept() {
				const response = await DepartmentStatisticsApi({
					date: this.activeColumns,
					'empId': uni.getStorageSync('empid')
				})
				// deptData
				response.data.forEach(item => {
					item.series = {
						series: [{
							data: []
						}]
					}
					item.departmentLevelNumberList.forEach(child => {
						child.labelText = `${child.name} : ${child.value}人`
					})
					item.series.series[0].data = item.departmentLevelNumberList
				})
				this.deptData = response.data
				const res = await AssessmentStatisticsApi({
					date: this.activeColumns,
					'empId': uni.getStorageSync('empid')
				})


				this.chartData.categories = res.data.grade
				this.chartData.series[0].data = res.data.numberOfPeople
			},

			handleDeptClick(item) {
				uni.navigateTo({
					url: `/pages/examine-statistics/cart-details?date=${this.activeColumns}&dept=${item.dept}`
				})
			}
		}
	};
</script>

<style scoped>
	.container {
		padding: 30rpx;
	}

	.custom-table {
		border-collapse: collapse;
		width: 100%;
	}

	.custom-table th,
	.custom-table td {
		border: 1px solid #ccc;
		padding: 8px;
		text-align: center;
	}

	.card {
		background: #ffffff;
		padding: 30rpx;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
	}

	.card-content {
		padding-top: 30rpx;
	}

	.title {
		border-bottom: 1px solid #f2f2f2;
		padding-bottom: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.back-top {
		width: 60rpx;
		height: 60rpx;
		position: fixed;
		bottom: 140rpx;
		right: 60rpx;
	}
</style>